<template>
    <div class="min-box">
        <div class="newsSection">
            <Mess></Mess>
            <!-- 右边格子 -->
            <RightGrid :listData="rightGridList"></RightGrid>
        </div>

        <!-- 列表 -->
        <div class="classList">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="学校课表" name="first"> </el-tab-pane>
                <el-tab-pane label="辅导" name="second"> </el-tab-pane>
                <el-tab-pane label="私塾" name="third"> </el-tab-pane>
                <el-tab-pane label="自订" name="fourth"> </el-tab-pane>
            </el-tabs>
            <ClassTable
                :gradeDataList="gradeDataList"
                :tableType="tableType"
            ></ClassTable>
        </div>
    </div>
</template>

<script>
import Mess from "./components/mess";
import RightGrid from "@/components/rightGrid/index";
import ClassTable from "@/components/classTable/index";

import { getGradeList } from "@/api/class";

export default {
    name: "Home",
    components: {
        Mess,
        RightGrid,
        ClassTable
    },
    data() {
        return {
            value: "",
            activeName: "first",
            rightGridList: [
                {
                    imgUrl: require("@/assets/images/icon/4.png"),
                    title: "作业",
                    subTitle: "完成老师布置作业",
                    url: "/work/selectClass/index"
                },
                {
                    imgUrl: require("@/assets/images/icon/1.png"),
                    title: "测验",
                    subTitle: "完成老师布置作业",
                    url: "/test/selectClass/index"
                },
                {
                    imgUrl: require("@/assets/images/icon/2.png"),
                    title: "趣练",
                    subTitle: "完成老师布置作业",
                    url: "/InterestingPractice/practice/index"
                },
                {
                    imgUrl: require("@/assets/images/icon/3.png"),
                    title: "同步",
                    subTitle: "完成老师布置作业",
                    url: "/synchronization/practice/index"
                }
            ],
            gradeDataList: [], //班级列表
            groupType: 1, //班级类型
            tableType: 1 //课表类型
        };
    },
    async created() {
        await this.get_grade_list();
    },
    methods: {
        handleClick() {
            if (this.activeName === "first") {
                this.groupType = 1;
                this.tableType = 1;
                this.get_grade_list();
            } else if (this.activeName === "third") {
                this.groupType = 2;
                this.tableType = 1;
                this.get_grade_list();
            } else if (this.activeName === "fourth") {
                //自订
                this.tableType = 2;
            } else {
                this.gradeDataList = [];
            }
        },
        //获取班级
        async get_grade_list() {
            var reqData = {
                student_id: this.$store.getters.userInfo.id,
                group_type: this.groupType
            };
            //获取班级类表
            var gradeData = await getGradeList(reqData);
            this.gradeDataList = gradeData.data;
        }
    }
};
</script>
<style scoped lang="scss">
.min-box {
    width: 100%;
    min-width: 1200px;
    height: 500px;
    padding: 26px;
    box-sizing: border-box;
}

// 消息框
.newsSection {
    width: 100%;
    height: 403px;
    border-radius: 8px;
    display: flex;
}

// <!-- 右边格子 -->
.rightGrid {
    width: 429px;
    padding-left: 25px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;

    .gridItem {
        width: 177px;
        height: 193px;
        border-radius: 8px;
        background: #ffffff;
        margin-right: 25px;
        margin-bottom: 15px;
        padding: 15px 20px;
        box-sizing: border-box;
        cursor: pointer;

        .gridItemImg {
            height: 96px;
            width: 96px;
            margin-bottom: 15px;
            img {
                height: 90px;
                width: 90px;
            }
        }

        .gridSubTitle {
            height: 19px;
            font-size: 14px;
            line-height: 19px;
            color: #9fa3b0;
            margin-bottom: 6px;
        }

        .gridTitle {
            height: 22px;
            font-size: 15px;
            line-height: 22px;
            color: #2c323f;
            font-weight: 600;
        }
    }
}

/* 列表 */
.classList {
    margin-top: 32px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 17px;
    box-sizing: border-box;
}

.tabsItemBox {
    padding: 0 0 20px 0 !important;
}
</style>
